import { useEffect, useState } from 'react';
import './TestPage.css';

// 证书信息接口
interface CertificateInfo {
  index: number;
  subjectCN: string;
  issuerCN: string;
  certSN: string;
  validFrom: string;
  validTo: string;
  algorithm: string;
  usage: string;
  keyIndex: number;
}

function Home() {
  const [zjcaStatus, setZjcaStatus] = useState<string>('未初始化');
  const [zjcaVersion, setZjcaVersion] = useState<string>('未知版本');
  const [certificates, setCertificates] = useState<CertificateInfo[]>([]);
  const [autoDetecting, setAutoDetecting] = useState<boolean>(false);
  const [deviceInfo, setDeviceInfo] = useState<string>(''); // 介质信息
  const [deviceType, setDeviceType] = useState<string>(''); // 介质类型（个人/企业）
  const [userName, setUserName] = useState<string>(''); // 使用者名称

  useEffect(() => {
    // 页面加载时初始化ZJCA CMT
    initializeZjcaCMT();

    // 页面卸载时释放资源
    return () => {
      releaseZjcaCMT();
    };
  }, []);

  // 介质事件回调函数 - 自动识别证书
  const onCallbackKeyEvent = (type: number, index: number, name: string) => {
    const eventType = type === 1 ? '接入' : type === 2 ? '拔除' : '未知';
    const currentTime = new Date().toLocaleTimeString('zh-CN');
    console.log(`✓ 介质${eventType}: [${index}] ${name} at ${currentTime}`);
    
    // 当介质接入时，自动枚举证书
    if (type === 1) {
      console.log('🔍 检测到介质接入，自动识别证书...');
      setDeviceInfo(name || '未知介质'); // 存储介质名称
      setTimeout(() => {
        autoEnumerateCertificates();
      }, 500); // 延迟500ms确保介质已就绪
    } else if (type === 2) {
      // 介质拔除时，清空证书列表和介质信息
      console.log('📤 介质已拔除，清空证书列表');
      setCertificates([]);
      setDeviceInfo('');
      setDeviceType('');
      setUserName('');
    }
  };

  // 自动枚举证书
  const autoEnumerateCertificates = () => {
    if (!window.g_ZjcaCMT) {
      console.warn('⚠️ ZJCA CMT未初始化');
      return;
    }

    setAutoDetecting(true);
    console.log('========== 自动识别介质证书 ==========');

    try {
      // 获取所有类型的证书（包括签名证书和加密证书）
      const ZJCA_CERT_ALL = 0;
      const resp = window.g_ZjcaCMT.getCertList(-1, 0, ZJCA_CERT_ALL);
      
      if (resp && resp.code === 0) {
        const certList = resp.res || [];
        
        if (certList.length > 0) {
          console.log(`✓ 自动识别到 ${certList.length} 个证书`);
          
          const certInfoList: CertificateInfo[] = certList.map((cert: any, idx: number) => {
            const subjectCN = cert.getSubjectCN ? cert.getSubjectCN() : '未知';
            const issuerCN = cert.getIssuerCN ? cert.getIssuerCN() : '未知';
            const certSN = cert.getSN ? cert.getSN() : '未知';
            const validFrom = cert.getFrom ? cert.getFrom() : '未知';
            const validTo = cert.getUntil ? cert.getUntil() : '未知';
            
            // 获取算法类型
            const algorithm = cert.getAlgorithm ? cert.getAlgorithm() : 0;
            // 判断算法：通过颁发者名称包含SM2来识别国密算法
            let algorithmName = '未知';
            if (algorithm === 1) {
              algorithmName = 'RSA';
            } else if (algorithm === 2) {
              algorithmName = 'SM2(国密)';
            } else if (issuerCN.includes('SM2') || subjectCN.includes('SM2')) {
              algorithmName = 'SM2(国密)';
            } else if (issuerCN.includes('RSA') || subjectCN.includes('RSA')) {
              algorithmName = 'RSA';
            } else {
              // 默认根据证书类型判断
              algorithmName = issuerCN.includes('SM') ? 'SM2(国密)' : 'RSA';
            }
            
            const usage = cert.getUsage ? cert.getUsage() : 0;
            const usageName = usage === 1 ? '签名' : usage === 2 ? '加密' : '未知';
            const keyIndex = cert.getKeyIndex ? cert.getKeyIndex() : 0;
            
            console.log(`  证书 ${idx + 1}: ${subjectCN} (${algorithmName})`);
            
            return {
              index: idx,
              subjectCN,
              issuerCN,
              certSN,
              validFrom,
              validTo,
              algorithm: algorithmName,
              usage: usageName,
              keyIndex
            };
          });
          
          setCertificates(certInfoList);
          
          // 判断介质类型和使用者名称 - 使用官方API方法
          let detectedType = '未知';
          let detectedUserName = '';
          if (certList.length > 0) {
            try {
              const firstCertObj = certList[0];
              
              // 1. 获取证书类型（个人/企业）
              const FUNC_CERT_ATTRIBUTE_PARAM_TYPE = "TYPE";
              const certTypeResp = window.g_ZjcaCMT.getCertAttribute(firstCertObj, FUNC_CERT_ATTRIBUTE_PARAM_TYPE, "");
              
              if (certTypeResp && certTypeResp.code === 0) {
                const certType = Number(certTypeResp.res);
                // 根据官方Demo：certType == 1 为个人证书，certType == 2 为企业证书
                if (certType === 1) {
                  detectedType = '个人';
                } else if (certType === 2) {
                  detectedType = '企业/机构';
                }
                console.log(`🏷️  介质类型识别: ${detectedType} (证书类型代码: ${certType})`);
              }
              
              // 2. 获取使用者名称（CN字段）
              const FUNC_CERT_ATTRIBUTE_PARAM_SUBJECT = "SUBJECT";
              const subjectCNResp = window.g_ZjcaCMT.getCertAttribute(firstCertObj, FUNC_CERT_ATTRIBUTE_PARAM_SUBJECT, "CN=");
              
              if (subjectCNResp && subjectCNResp.code === 0 && subjectCNResp.res) {
                detectedUserName = subjectCNResp.res;
                console.log(`👤 使用者名称: ${detectedUserName}`);
              } else {
                // 如果获取失败，使用证书对象的方法
                detectedUserName = certInfoList[0].subjectCN;
                console.log(`👤 使用者名称: ${detectedUserName} (从证书列表获取)`);
              }
              
            } catch (error: any) {
              console.error('✗ 获取证书信息失败:', error.message);
              // 降级方案：使用证书列表中的名称
              detectedUserName = certInfoList[0]?.subjectCN || '';
            }
          }
          setDeviceType(detectedType);
          setUserName(detectedUserName);
          
          // 存储到全局变量，供签名、加密等功能自动调用
          (window as any).g_AutoDetectedCerts = certInfoList;
          (window as any).g_CurrentCertList = certList; // 保留原始证书对象
          
          // 存储证书信息到 window.autoDetectedCerts（供加密/解密页面使用）
          if (typeof window.autoDetectedCerts === 'undefined') {
            window.autoDetectedCerts = [];
          }
          window.autoDetectedCerts = certInfoList.map(cert => ({
            keyIndex: cert.keyIndex,
            usage: cert.usage === '签名' ? 1 : 2,
            algorithm: cert.algorithm,
            subjectCN: cert.subjectCN,
            issuerCN: cert.issuerCN,
            serialNumber: cert.certSN,
            notBefore: cert.validFrom,
            notAfter: cert.validTo
          }));
          
          // 静默记录日志，不显示弹窗通知
          console.log(`✓ 成功自动识别 ${certInfoList.length} 个证书，已存储供后续调用`);
          certInfoList.forEach((cert, i) => {
            console.log(`  证书 ${i + 1}: ${cert.subjectCN} | 用途: ${cert.usage} | 算法: ${cert.algorithm}`);
          });
          
        } else {
          console.log('⚠️ 介质中没有证书');
          setCertificates([]);
        }
      } else {
        console.error('✗ 自动识别证书失败:', resp?.msg);
        setCertificates([]);
      }
      
      console.log('========================================');
    } catch (error) {
      console.error('自动识别证书异常:', error);
      setCertificates([]);
    } finally {
      setAutoDetecting(false);
    }
  };

  // 初始化ZJCA CMT API
  const initializeZjcaCMT = () => {
    try {
      console.log('========== 初始化 ZJCA CMT API ==========');
      
      if (typeof window.zjca_CMT === 'undefined') {
        console.error('✗ ZJCA SDK未加载');
        console.error('请确保：');
        console.error('1. 已在 index.html 中引入 zjcacmt.js');
        console.error('2. SDK文件路径正确');
        setZjcaStatus('✗ SDK未加载');
        setZjcaVersion('未知');
        return;
      }

      // 先释放旧的实例
      if (window.g_ZjcaCMT) {
        try {
          window.g_ZjcaCMT = null;
        } catch (e) {
          console.warn('释放旧实例时出错:', e);
        }
      }

      console.log('正在创建 zjca_CMT 对象...');
      const g_ZjcaCMT = new window.zjca_CMT(onCallbackKeyEvent, null);
      
      if (!g_ZjcaCMT) {
        console.error('✗ 创建ZJCA CMT对象失败');
        setZjcaStatus('✗ 创建对象失败');
        setZjcaVersion('未知');
        return;
      }

      console.log('✓ zjca_CMT 对象创建成功');

      // 设置协议（必须在init之前设置）
      // 参考官方Demo使用HTTPS
      console.log('设置通信协议...');
      try {
        const protocol = window.PROTOCOL_HTTPS || 'https';
        g_ZjcaCMT.setProtocol(protocol);
        console.log('✓ 设置协议: HTTPS (端口 5150)');
      } catch (e) {
        console.error('✗ 设置协议失败:', e);
        setZjcaStatus('✗ 协议设置失败');
        setZjcaVersion('未知');
        return;
      }

      // 初始化ZJCA控件对象（关键步骤！）
      console.log('初始化ZJCA控件对象...');
      const productType = window.ZJCA_PRODUCT_CMT || 0x01;
      console.log('  - 产品类型: ZJCA_PRODUCT_CMT (0x' + productType.toString(16) + ')');
      console.log('  - 版本: 1');
      let initResp = null;
      try {
        // 使用官方常量：ZJCA_PRODUCT_CMT = 0x01, 第二个参数为版本号
        initResp = g_ZjcaCMT.init(productType, 1);
        console.log('init 返回:', initResp);
      } catch (e) {
        console.error('✗ 初始化失败:', e);
        setZjcaStatus('✗ 初始化异常');
        setZjcaVersion('未知');
        console.log('========================================');
        return;
      }

      if (!initResp || initResp.code !== 0) {
        console.error('✗ 初始化ZJCA客户端失败');
        console.error('错误:', initResp?.msg);
        console.error('');
        console.error('💡 如果遇到 SSL 证书错误，请：');
        console.error('1. 在新标签页访问: https://127.0.0.1:5150/');
        console.error('2. 点击"高级" → "继续访问(不安全)"');
        console.error('3. 返回本页面，点击"🔄 重新初始化"');
        console.error('');
        
        setZjcaStatus('✗ 连接失败');
        setZjcaVersion('未知');
        console.log('========================================');
        return;
      }

      console.log('✓ ZJCA控件初始化成功');
      
      // 获取版本信息
      console.log('获取版本信息...');
      let versionResp = null;
      try {
        versionResp = g_ZjcaCMT.getVersion();
        console.log('getVersion 返回:', versionResp);
      } catch (e) {
        console.error('✗ 获取版本信息失败:', e);
        setZjcaStatus('✗ 获取版本失败');
        setZjcaVersion('未知');
        console.log('========================================');
        return;
      }
      
      if (versionResp && versionResp.code === 0) {
        setZjcaStatus('✓ 已初始化');
        setZjcaVersion(versionResp.res || '未知版本');
        window.g_ZjcaCMT = g_ZjcaCMT;
        console.log('✓ ZJCA CMT 初始化成功');
        console.log('  - 版本:', versionResp.res);
        console.log('  - 状态: 客户端连接正常');
        
        // 初始化成功后，自动枚举已插入介质的证书
        console.log('🔍 初始化完成，自动检测介质证书...');
        setTimeout(() => {
          autoEnumerateCertificates();
        }, 1000); // 延迟1秒确保一切就绪
      } else {
        setZjcaStatus('✗ 初始化失败');
        setZjcaVersion('未知');
        console.error('✗ 初始化失败:', versionResp);
      }
      
      console.log('========================================');
    } catch (error) {
      console.error('========================================');
      console.error('💥 初始化ZJCA CMT异常:', error);
      console.error('========================================');
      setZjcaStatus('✗ 初始化异常');
      setZjcaVersion('未知');
    }
  };

  // 释放ZJCA CMT资源
  const releaseZjcaCMT = () => {
    try {
      if (window.g_ZjcaCMT) {
        console.log('释放ZJCA CMT资源...');
        window.g_ZjcaCMT = null;
      }
    } catch (error) {
      console.error('释放资源异常:', error);
    }
  };

  // 重新初始化
  const handleReinitialize = () => {
    console.log('手动重新初始化...');
    releaseZjcaCMT();
    setTimeout(() => {
      initializeZjcaCMT();
    }, 500);
  };

  // 枚举介质列表
  const handleEnumerateKeys = () => {
    try {
      if (!window.g_ZjcaCMT) {
        alert('ZJCA CMT未初始化，请先初始化！');
        return;
      }

      console.log('========== 枚举介质列表 ==========');
      const resp = window.g_ZjcaCMT.getKeyList(false); // false = 不强制刷新
      console.log('getKeyList 返回:', resp);
      
      if (resp && resp.code === 0) {
        // 成功调用，但需要检查是否有介质
        // 注意：按照官方DEMO，需要先初始化为空数组，然后再赋值
        const keyList = resp.res || []; // 如果res为null，使用空数组
        
        if (keyList.length > 0) {
          console.log('✓ 找到', keyList.length, '个介质');
          
          let message = `找到 ${keyList.length} 个介质：\n\n`;
          keyList.forEach((key: any, index: number) => {
            const sn = key.getSN ? key.getSN() : '未知';
            const label = key.getLabel ? key.getLabel() : '未知';
            console.log(`  介质 ${index}:`, { sn, label });
            message += `介质 ${index + 1}:\n`;
            message += `  - 序列号: ${sn}\n`;
            message += `  - 标签: ${label}\n\n`;
          });
          
          alert(message);
        } else {
          // 调用成功但没有介质
          console.log('⚠ 未找到介质');
          console.log('  - 可能原因: 未插入USB Key或其他介质');
          alert('未找到介质\n\n可能原因：\n1. 未插入USB Key或其他介质\n2. 介质未被正确识别\n3. 请检查介质连接并重试');
        }
      } else {
        console.error('✗ 枚举介质失败');
        console.error('  - 错误代码:', resp?.code);
        console.error('  - 错误信息:', resp?.msg);
        alert(`枚举介质失败\n错误代码: ${resp?.code}\n错误信息: ${resp?.msg || '未知错误'}`);
      }
      
      console.log('========================================');
    } catch (error) {
      console.error('枚举介质异常:', error);
      alert(`枚举介质异常: ${error}`);
    }
  };

  // 枚举签名证书列表并显示详细信息
  const handleEnumerateCerts = () => {
    try {
      if (!window.g_ZjcaCMT) {
        alert('ZJCA CMT未初始化，请先初始化！');
        return;
      }

      console.log('========== 枚举所有证书列表 ==========');
      // getCertList(keyIndex, certIndex, certType)
      // keyIndex: -1=所有介质, 0=第一个介质
      // certIndex: 0=所有证书
      // certType: 1=签名证书, 2=加密证书, 0=所有类型
      const ZJCA_CERT_ALL = 0; // 所有类型证书
      const resp = window.g_ZjcaCMT.getCertList(-1, 0, ZJCA_CERT_ALL);
      console.log('getCertList 返回:', resp);
      
      if (resp && resp.code === 0) {
        // 成功调用，但需要检查是否有证书
        // 注意：按照官方DEMO，需要先初始化为空数组，然后再赋值
        const certList = resp.res || []; // 如果res为null，使用空数组
        
        if (certList.length > 0) {
          console.log('✓ 找到', certList.length, '个证书');
          
          // 存储证书列表到全局变量，供查看详情使用
          (window as any).g_CurrentCertList = certList;
          
          let message = `找到 ${certList.length} 个证书：\n\n`;
          certList.forEach((cert: any, index: number) => {
            const subjectCN = cert.getSubjectCN ? cert.getSubjectCN() : '未知';
            const issuerCN = cert.getIssuerCN ? cert.getIssuerCN() : '未知';
            const certSN = cert.getSN ? cert.getSN() : '未知';
            const validFrom = cert.getFrom ? cert.getFrom() : '未知';
            const validUntil = cert.getUntil ? cert.getUntil() : '未知';
            
            // 获取算法类型
            const algorithm = cert.getAlgorithm ? cert.getAlgorithm() : 0;
            // 判断算法：通过颁发者名称包含SM2来识别国密算法
            let algorithmName = '未知';
            if (algorithm === 1) {
              algorithmName = 'RSA';
            } else if (algorithm === 2) {
              algorithmName = 'SM2(国密)';
            } else if (issuerCN.includes('SM2') || subjectCN.includes('SM2')) {
              algorithmName = 'SM2(国密)';
            } else if (issuerCN.includes('RSA') || subjectCN.includes('RSA')) {
              algorithmName = 'RSA';
            } else {
              // 默认根据证书类型判断
              algorithmName = issuerCN.includes('SM') ? 'SM2(国密)' : 'RSA';
            }
            
            const usage = cert.getUsage ? cert.getUsage() : 0;
            const usageName = usage === 1 ? '签名' : usage === 2 ? '加密' : '未知';
            
            console.log(`  证书 ${index}:`, { 
              subjectCN, 
              issuerCN, 
              certSN, 
              algorithm: `${algorithm} -> ${algorithmName}`,
              usage: usageName,
              validFrom,
              validUntil
            });
            
            message += `【证书 ${index + 1}】\n`;
            message += `  主题: ${subjectCN}\n`;
            message += `  颁发者: ${issuerCN}\n`;
            message += `  序列号: ${certSN}\n`;
            message += `  算法: ${algorithmName}\n`;
            message += `  用途: ${usageName}\n`;
            message += `  有效期: ${validFrom} 至 ${validUntil}\n\n`;
          });
          
          message += '━━━━━━━━━━━━━━━━━━━━\n';
          message += '💡 提示：关闭此对话框后，可以点击\n';
          message += '   "查看证书详情" 按钮选择要查看的证书';
          
          alert(message);
        } else {
          // 调用成功但没有证书
          console.log('⚠ 未找到证书');
          console.log('  - 可能原因: 未插入介质或介质中没有证书');
          alert('未找到证书\n\n可能原因：\n1. 未插入USB Key或其他介质\n2. 介质中没有证书\n3. 请先插入介质，然后重试');
        }
      } else {
        console.error('✗ 枚举证书失败');
        console.error('  - 错误代码:', resp?.code);
        console.error('  - 错误信息:', resp?.msg);
        alert(`枚举证书失败\n错误代码: ${resp?.code}\n错误信息: ${resp?.msg || '未知错误'}`);
      }
      
      console.log('========================================');
    } catch (error) {
      console.error('枚举证书异常:', error);
      alert(`枚举证书异常: ${error}`);
    }
  };

  // 查看证书详细属性
  const handleShowCertDetail = () => {
    try {
      if (!window.g_ZjcaCMT) {
        alert('ZJCA CMT未初始化，请先初始化！');
        return;
      }

      // 检查是否有已枚举的证书列表
      const certList = (window as any).g_CurrentCertList;
      if (!certList || certList.length === 0) {
        alert('请先点击"枚举证书列表"按钮获取证书列表');
        return;
      }

      console.log('========== 查看证书详细属性 ==========');
      
      // 如果只有一个证书，直接显示
      if (certList.length === 1) {
        showCertificateDetail(certList[0]);
        return;
      }

      // 多个证书，让用户选择
      let selectMessage = '请选择要查看详情的证书：\n\n';
      certList.forEach((cert: any, index: number) => {
        const subjectCN = cert.getSubjectCN ? cert.getSubjectCN() : '未知';
        const certSN = cert.getSN ? cert.getSN() : '未知';
        selectMessage += `${index + 1}. ${subjectCN}\n`;
        selectMessage += `   (序列号: ${certSN})\n\n`;
      });
      selectMessage += `\n请输入证书编号 (1-${certList.length}):`;

      const selection = prompt(selectMessage);
      if (selection === null) {
        console.log('用户取消选择');
        return;
      }

      const certIndex = parseInt(selection) - 1;
      if (isNaN(certIndex) || certIndex < 0 || certIndex >= certList.length) {
        alert(`无效的证书编号，请输入 1-${certList.length} 之间的数字`);
        return;
      }

      showCertificateDetail(certList[certIndex]);
      
    } catch (error) {
      console.error('查看证书详情异常:', error);
      alert(`查看证书详情异常: ${error}`);
    }
  };

  // 显示指定证书的详细属性（调用ZJCA客户端的证书查看器）
  const showCertificateDetail = (cert: any) => {
    try {
      console.log('显示证书详细信息...');
      
      // 方法1: 通过序列号获取证书内容
      const certSN = cert.getSN();
      console.log('  - 证书序列号:', certSN);
      
      let resp = window.g_ZjcaCMT.getCertContentBySN(certSN);
      
      // 方法2: 如果方法1失败，尝试通过介质索引获取
      if (!resp || resp.code !== 0) {
        console.log('  - 尝试通过介质索引获取证书内容...');
        const keyIndex = cert.getKeyIndex ? cert.getKeyIndex() : 0;
        const algorithm = cert.getAlgorithm ? cert.getAlgorithm() : 0;
        const usage = cert.getUsage ? cert.getUsage() : 1;
        
        resp = window.g_ZjcaCMT.getCertContent(keyIndex, algorithm, usage);
      }
      
      if (resp && resp.code === 0) {
        const certBase64 = resp.res;
        console.log('✓ 成功获取证书内容');
        console.log('  - 证书长度:', certBase64 ? certBase64.length : 0);
        
        // 调用ZJCA客户端的证书查看器（会弹出系统原生的证书详情窗口）
        const showResp = window.g_ZjcaCMT.showCert(certBase64, 0);
        
        if (showResp && showResp.code === 0) {
          console.log('✓ 证书详情窗口已打开');
        } else {
          console.error('✗ 打开证书详情窗口失败');
          console.error('  - 错误代码:', showResp?.code);
          console.error('  - 错误信息:', showResp?.msg);
          
          // 如果无法打开系统证书查看器，显示文本信息
          const subjectCN = cert.getSubjectCN ? cert.getSubjectCN() : '未知';
          const issuerCN = cert.getIssuerCN ? cert.getIssuerCN() : '未知';
          const validFrom = cert.getFrom ? cert.getFrom() : '未知';
          const validUntil = cert.getUntil ? cert.getUntil() : '未知';
          const algorithm = cert.getAlgorithm ? cert.getAlgorithm() : 0;
          const algorithmName = algorithm === 1 ? 'RSA' : algorithm === 2 ? 'SM2(国密)' : '未知';
          
          let detailMessage = '========== 证书详细信息 ==========\n\n';
          detailMessage += `主题 (Subject CN): ${subjectCN}\n\n`;
          detailMessage += `颁发者 (Issuer CN): ${issuerCN}\n\n`;
          detailMessage += `序列号: ${certSN}\n\n`;
          detailMessage += `算法类型: ${algorithmName}\n\n`;
          detailMessage += `有效期从: ${validFrom}\n`;
          detailMessage += `有效期到: ${validUntil}\n\n`;
          detailMessage += `证书内容 (Base64):\n${certBase64.substring(0, 200)}...\n\n`;
          detailMessage += `━━━━━━━━━━━━━━━━━━━━\n`;
          detailMessage += `注意：无法打开系统证书查看器\n`;
          detailMessage += `错误: ${showResp?.msg || '未知错误'}`;
          
          alert(detailMessage);
        }
      } else {
        console.error('✗ 获取证书内容失败');
        console.error('  - 错误代码:', resp?.code);
        console.error('  - 错误信息:', resp?.msg);
        alert(`获取证书内容失败\n错误代码: ${resp?.code}\n错误信息: ${resp?.msg || '未知错误'}`);
      }
      
      console.log('========================================');
    } catch (error) {
      console.error('显示证书详情异常:', error);
      alert(`显示证书详情异常: ${error}`);
    }
  };

  return (
    <div className="test-page">
      <div className="test-container">
        <div className="test-content">
          <div className="status-card">
            <h2>🔐 ZJCA CMT 状态</h2>
            <div className="status-grid">
              <div className="status-item">
                <span className="status-label">初始化状态:</span>
                <span className={`status-value ${zjcaStatus.includes('✓') ? 'success' : zjcaStatus.includes('✗') ? 'error' : 'warning'}`}>
                  {zjcaStatus}
                </span>
              </div>
              
              <div className="status-item">
                <span className="status-label">版本信息:</span>
                <span className="status-value">{zjcaVersion}</span>
              </div>
              
              {deviceInfo && (
                <div className="status-item">
                  <span className="status-label">介质信息:</span>
                  <span className="status-value" style={{color: '#1976d2'}}>
                    {deviceInfo}
                  </span>
                </div>
              )}
              
              {userName && (
                <div className="status-item">
                  <span className="status-label">使用者:</span>
                  <span className="status-value" style={{
                    color: '#d32f2f',
                    fontWeight: '600',
                    fontSize: '15px'
                  }}>
                    {userName}
                  </span>
                </div>
              )}
              
              {deviceType && (
                <div className="status-item">
                  <span className="status-label">介质类型:</span>
                  <span className="status-value" style={{
                    color: deviceType === '个人' ? '#2e7d32' : deviceType === '企业/机构' ? '#1565c0' : '#757575',
                    fontWeight: '600'
                  }}>
                    {deviceType === '个人' ? '👤 个人' : deviceType === '企业/机构' ? '🏢 企业/机构' : deviceType}
                  </span>
                </div>
              )}
            </div>

            <div className="actions">
              <button className="btn-primary" onClick={handleReinitialize}>
                🔄 重新初始化
              </button>
              <button className="btn-secondary" onClick={handleEnumerateKeys}>
                📋 枚举介质列表
              </button>
              <button className="btn-secondary" onClick={handleEnumerateCerts}>
                📜 枚举所有证书
              </button>
              <button className="btn-secondary" onClick={handleShowCertDetail}>
                🔍 查看证书详情
              </button>
            </div>

            {/* 自动识别状态提示 */}
            {autoDetecting && (
              <div style={{
                marginTop: '16px',
                padding: '12px 16px',
                background: 'linear-gradient(90deg, #e3f2fd 0%, #bbdefb 100%)',
                border: '1px solid #2196f3',
                borderRadius: '8px',
                display: 'flex',
                alignItems: 'center',
                gap: '12px'
              }}>
                <div style={{
                  fontSize: '20px',
                  animation: 'spin 1s linear infinite'
                }}>🔍</div>
                <div style={{fontSize: '14px', color: '#1565c0', fontWeight: '500'}}>
                  正在自动识别介质证书...
                </div>
              </div>
            )}

            {!autoDetecting && certificates.length > 0 && (
              <div style={{
                marginTop: '16px',
                padding: '12px 16px',
                background: 'linear-gradient(90deg, #e8f5e9 0%, #c8e6c9 100%)',
                border: '1px solid #4caf50',
                borderRadius: '8px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between'
              }}>
                <div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
                  <div style={{fontSize: '20px'}}>✅</div>
                  <div>
                    <div style={{fontSize: '14px', color: '#2e7d32', fontWeight: '600'}}>
                      已自动识别 {certificates.length} 个证书
                    </div>
                    <div style={{fontSize: '12px', color: '#558b2f', marginTop: '2px'}}>
                      {certificates.map(c => `${c.subjectCN}(${c.usage})`).join(' / ')}
                    </div>
                  </div>
                </div>
                <button
                  onClick={() => {
                    // 显示详细证书列表
                    let message = `📋 已识别的证书列表\n\n`;
                    certificates.forEach((cert, i) => {
                      message += `【证书 ${i + 1}】\n`;
                      message += `  主题: ${cert.subjectCN}\n`;
                      message += `  用途: ${cert.usage}\n`;
                      message += `  算法: ${cert.algorithm}\n`;
                      message += `  有效期: ${cert.validFrom} 至 ${cert.validTo}\n\n`;
                    });
                    message += '这些证书将自动用于签名、加密等操作。';
                    alert(message);
                  }}
                  style={{
                    padding: '6px 14px',
                    background: '#fff',
                    color: '#2e7d32',
                    border: '1px solid #4caf50',
                    borderRadius: '6px',
                    fontSize: '12px',
                    fontWeight: '600',
                    cursor: 'pointer',
                    whiteSpace: 'nowrap'
                  }}
                >
                  查看详情
                </button>
              </div>
            )}

            {/* SSL证书信任提示 */}
            {zjcaStatus === '✗ 连接失败' && (
              <div style={{
                marginTop: '20px',
                padding: '20px',
                background: 'linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%)',
                border: '3px solid #0288d1',
                borderRadius: '12px',
                boxShadow: '0 4px 12px rgba(2, 136, 209, 0.2)'
              }}>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '12px',
                  marginBottom: '16px'
                }}>
                  <div style={{
                    fontSize: '32px',
                    background: '#fff',
                    width: '50px',
                    height: '50px',
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                  }}>
                    🔒
                  </div>
                  <div>
                    <div style={{fontSize: '18px', fontWeight: 'bold', color: '#01579b'}}>
                      需要信任SSL证书
                    </div>
                    <div style={{fontSize: '13px', color: '#0277bd', marginTop: '4px'}}>
                      浏览器阻止了自签名证书连接
                    </div>
                  </div>
                </div>

                <div style={{
                  background: '#fff',
                  padding: '16px',
                  borderRadius: '8px',
                  marginBottom: '12px',
                  border: '1px solid #4fc3f7'
                }}>
                  <div style={{fontSize: '14px', fontWeight: 'bold', color: '#01579b', marginBottom: '12px'}}>
                    📋 操作步骤：
                  </div>
                  <div style={{fontSize: '13px', color: '#666', lineHeight: '2'}}>
                    <strong style={{color: '#0277bd'}}>步骤 1:</strong> 
                    <a 
                      href="https://127.0.0.1:5150/" 
                      target="_blank" 
                      rel="noopener noreferrer"
                      style={{
                        color: '#0288d1',
                        textDecoration: 'underline',
                        fontWeight: 'bold',
                        marginLeft: '8px'
                      }}
                    >
                      点击这里访问 https://127.0.0.1:5150/
                    </a>
                    <br/>
                    <strong style={{color: '#0277bd'}}>步骤 2:</strong> 在新页面中点击 <strong>"高级"</strong><br/>
                    <strong style={{color: '#0277bd'}}>步骤 3:</strong> 点击 <strong>"继续访问 127.0.0.1 (不安全)"</strong><br/>
                    <strong style={{color: '#0277bd'}}>步骤 4:</strong> 返回本页面，点击 <strong>🔄 重新初始化</strong>
                  </div>
                </div>

                <div style={{
                  background: '#fff3e0',
                  padding: '12px',
                  borderRadius: '8px',
                  border: '1px solid #ffb74d',
                  fontSize: '12px',
                  color: '#e65100'
                }}>
                  💡 <strong>说明：</strong>此操作只需要执行一次，浏览器会记住信任的证书。
                </div>
              </div>
            )}

            {/* 诊断提示 */}
            {zjcaStatus.includes('✗') && zjcaStatus !== '✗ 连接失败' && (
              <div style={{
                marginTop: '20px',
                padding: '20px',
                background: 'linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%)',
                border: '3px solid #ff9800',
                borderRadius: '12px',
                boxShadow: '0 4px 12px rgba(255, 152, 0, 0.2)'
              }}>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: '12px',
                  marginBottom: '16px'
                }}>
                  <div style={{
                    fontSize: '32px',
                    background: '#fff',
                    width: '50px',
                    height: '50px',
                    borderRadius: '50%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                  }}>
                    ⚠️
                  </div>
                  <div>
                    <div style={{fontSize: '18px', fontWeight: 'bold', color: '#e65100'}}>
                      ZJCA客户端未运行
                    </div>
                    <div style={{fontSize: '13px', color: '#ef6c00', marginTop: '4px'}}>
                      当前状态: {zjcaStatus}
                    </div>
                  </div>
                </div>

                <div style={{
                  background: '#fff',
                  padding: '16px',
                  borderRadius: '8px',
                  marginBottom: '12px',
                  border: '1px solid #ffb74d'
                }}>
                  <div style={{fontSize: '14px', fontWeight: 'bold', color: '#e65100', marginBottom: '12px'}}>
                    🔧 快速解决方法：
                  </div>
                  <div style={{fontSize: '13px', color: '#666', lineHeight: '2'}}>
                    <strong style={{color: '#d84315'}}>步骤 1:</strong> 检查任务栏右下角系统托盘<br/>
                    <strong style={{color: '#d84315'}}>步骤 2:</strong> 找到 <strong>ZJCA图标</strong>（通常是一个盾牌或钥匙图标）<br/>
                    <strong style={{color: '#d84315'}}>步骤 3:</strong> 如果没有图标，请启动 <strong>ZJCA客户端</strong><br/>
                    <strong style={{color: '#d84315'}}>步骤 4:</strong> 等待客户端启动完成后，点击 <strong>🔄 重新初始化</strong>
                  </div>
                </div>

                <details style={{
                  background: '#fff',
                  padding: '12px',
                  borderRadius: '8px',
                  border: '1px solid #ffb74d',
                  cursor: 'pointer'
                }}>
                  <summary style={{
                    fontSize: '14px',
                    fontWeight: 'bold',
                    color: '#ef6c00',
                    cursor: 'pointer',
                    userSelect: 'none'
                  }}>
                    📖 详细诊断信息（点击展开）
                  </summary>
                  <div style={{fontSize: '13px', color: '#666', lineHeight: '1.8', marginTop: '12px', paddingLeft: '8px'}}>
                    <strong>⚡ 连接协议：</strong><br/>
                    • <strong>HTTP</strong> (推荐): <code>http://127.0.0.1:5160/</code><br/>
                    • <strong>HTTPS</strong>: <code>https://127.0.0.1:5150/</code><br/>
                    <br/>
                    <strong>🔍 当前优先顺序：</strong><br/>
                    1️⃣ 优先尝试 HTTP (端口5160) - 无证书问题<br/>
                    2️⃣ HTTP失败时尝试 HTTPS (端口5150)<br/>
                    <br/>
                    <strong>⚠️ 如果遇到 SSL 证书错误：</strong><br/>
                    　1. 在浏览器新标签页中访问: <a href="https://127.0.0.1:5150/" target="_blank" style={{color: '#1976d2'}}>https://127.0.0.1:5150/</a><br/>
                    　2. 点击"高级"→"继续访问(不安全)"以信任证书<br/>
                    　3. 返回本页面，点击 🔄 重新初始化<br/>
                    <br/>
                    <strong>💡 常见问题：</strong><br/>
                    　• ZJCA客户端未安装或未启动<br/>
                    　• WebSocket连接被防火墙阻止<br/>
                    　• 端口被其他程序占用<br/>
                    　• 客户端版本过旧<br/>
                    <br/>
                    <strong>安装路径（通常）：</strong><br/>
                    　• C:\Program Files\ZJCA\<br/>
                    　• C:\Program Files (x86)\ZJCA\<br/>
                  </div>
                </details>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;
